<template>
  <view class='content'>
    <view class="title">可使用红包</view>
    <view class="coupon" v-for="(item, index) in couponList" :key="item.platformcoupon_id">
      <view class="left">
        <view class="name">{{ item.platformcoupon_name }}</view>
        <text class="period">有效期{{ item.end_time | formatTime }}</text>
      </view>
      <view class="right">
        <view class="money">
          <view>
            <text class="icon">￥</text>
            <text class="num">{{ item.money }}</text>
          </view>
          <text v-if="item.at_least == '0.00'" class="astrict">满{{ item.at_least }}可用</text>
        </view>
        <checkbox-group @change="radioChange($event, index)">
          <checkbox :value="item.platformcoupon_id" :checked="item.checked" />
        </checkbox-group>
      </view>
    </view>
    <view class="btn">
      <view class="msg">红包优惠￥{{ ticket.money }}</view>
      <view class="affirm" @click="affirm">确认</view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['couponList',],
  data() {
    return {
      // 优惠金额
      ticket: {
        platformcoupon_id: null,
        money: 0
      }
    }
  },
  methods: {
    // 确定
    affirm() {
      if (!this.ticket.platformcoupon_id) {
        this.ticke = {
          platformcoupon_id: null,
          money: 0
        }
        this.$emit('affirmTicket', this.ticket)
        return false;
      }
      this.$emit('affirmTicket', this.ticket)
    },
    radioChange(e, index) {
      this.couponList.forEach(item => {
        item.checked = false
      })
      this.couponList[index].checked = true
      if (e.detail.value.length > 0) {
        let obj = this.couponList[index]
        this.ticket.platformcoupon_id = e.detail.value[0]
        this.ticket.money = obj.money
      } else {
        this.ticket.platformcoupon_id = null
        this.ticket.money = 0
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.content {
  height: 60vh;
  overflow: auto;
  background: #f6f6f6;
  padding: 30rpx 30rpx;

  .title {
    font-weight: 600;
    font-size: 34rpx;
    margin-bottom: 20rpx;
  }

}

.coupon {
  padding: 30rpx 20rpx;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10rpx;
  background: #fff;

  .left {
    .name {
      font-weight: 600;
      font-size: 32rpx;
      margin-bottom: 10rpx;
    }

    .period {
      font-size: 26rpx;
      color: #7f7e7e;
    }
  }

  .right {
    display: flex;
    align-items: center;
    justify-content: center;

    .money {
      margin-right: 20rpx;
      color: rgb(230, 51, 51);

      .icon {}

      .num {
        font-size: 50rpx;
      }

      .astrict {
        font-size: 26rpx;
      }
    }
  }


}

.btn {
  position: fixed;
  bottom: 50rpx;
  left: 20rpx;
  right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;

  .msg {
    flex: 1;
    background: #000000;
    color: #fff;
    font-size: 32rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-top-left-radius: 100rpx;
    border-bottom-left-radius: 100rpx;
    padding-left: 30rpx;

  }

  .affirm {
    height: 100rpx;
    line-height: 100rpx;
    border-top-right-radius: 100rpx;
    border-bottom-right-radius: 100rpx;
    width: 200rpx;
    background: #f8dd68;
    color: #000;
    font-size: 40rpx;
    text-align: center;
  }
}
</style>
